<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Calendar 日期选择器 - 前端开发仓库</title>
<meta name="keywords" content="jquery插件,jQuery日期插件，jQuery日历插件,jQuery日历控件">
<meta name="description" content="一款基于jQuery的日期选择插件，可自定义外观及调用参数，兼容主流浏览器。">
<link href="../../css/base.css" rel="stylesheet">
<link href="../../css/code.css" rel="stylesheet">
<style>
/* 日期输入框
------------------------------ */
input.input_calendar{width:78px;height:18px;padding:1px 5px;border:1px solid #555;background:url(img/calendar_day.png) no-repeat right center;font:12px/18px Arial;cursor:pointer;}

/* 日期选择器
------------------------------ */
.html_calendar{display:none;position:absolute;width:182px;font:12px Arial;border:1px solid #88b6d8;border-top:none;box-shadow:2px 2px 5px #083e66;z-index:1001;}
.html_calendar h5{position:relative;height:20px;padding:4px 6px;background:#88b6d8;color:#fff;font:normal 12px/20px "\5B8B\4F53";text-align:center;}
.html_calendar h5 select{vertical-align:baseline;font:12px/18px Tahoma;}
.html_calendar h5 span{padding:0 6px;}
.html_calendar table{position:relative;border-collapse:collapse;table-layout:fixed;empty-cells:show;font-family:Arial;text-align:center;}
.html_calendar table .sat{color:#06f}
.html_calendar table .sun{color:#e00;}
.html_calendar table .now{background:#d9e9fa;}
.html_calendar table .selected{background:#090;color:#fff;}
.html_calendar thead th{width:26px;height:24px;background:#fff;line-height:24px;text-align:center;}
.html_calendar tfoot td{height:24px;border-top:1px solid #ccc;background:#eee;color:#999;font-family:"\5B8B\4F53";line-height:24px;}
.html_calendar tfoot a{cursor:pointer;}
.html_calendar tfoot .pre,
.html_calendar tfoot .next{font-family:Tahoma;font-size:11px;}
.html_calendar tfoot .clear{}
.html_calendar tfoot a:hover{color:#333;text-decoration:none;}
.html_calendar tbody td{position:static;width:26px;height:22px;padding:0;background:#eaf4fe;line-height:22px;}
.html_calendar tbody td.num:hover{background:#88b6d8;color:#fff;text-decoration:none;cursor:pointer;}
</style>
</head>
<body>
<div id="header" class="header">
	<p class="breadcrumb"><a href="../../">前端开发仓库</a> &raquo; <a href="../../jquery">jQuery</a> &raquo; <strong>Calendar 日期选择器</strong></p>
</div>
<div class="content">
	<h1>jQuery Calendar 日期选择器</h1>
	<ul class="intro">
		<li><em>·</em>基于jQuery v1.4.4</li>
		<li><em>·</em>可在 input 的 value 中预设值（value的值优先级高于传递的参数）</li>
		<li><em>·</em>input 属性：&lt;input id="element_id" type="text" class="input_calendar"&gt;</li>
	</ul>
	<div class="intro">
		<p><a class="source_download" href="version/jquery.calendar_20120914_2fdd1985.rar">jQuery Calendar 日期选择器</a></p>
	</div>

	<h2>【示例】</h2>
	<form class="intro" action="get_date.php" method="post">
		<label for="date_a">选择日期：</label><input id="date_a" name="mydate" type="text" class="input_calendar" readonly>　<button class="awesome orange" type="submit">提 交</button>
	</form>
	
	<h2>【settings 参数说明】（可选）</h2>
	<div class="intro">
		<table class="manual_table table_form">
			<thead>
				<tr>
					<th width="80">名称</th>
					<th width="100">默认值</th>
					<th>说明</th>
				</tr>
			</thead>
			<tr>
				<td>begin_year</td>
				<td>1950</td>
				<td>起始年份</td>
			</tr>
			<tr>
				<td>end_year</td>
				<td>2030</td>
				<td>结束年份</td>
			</tr>
			<tr>
				<td>date</td>
				<td>new Date()</td>
				<td>
					<p>默认日期。默认使用 javascript 获取当前日期，自定义需使用字符串。日期格式和 type 相同。</p>
					<p>※ input 中的 value 值优先级要高级此值。</p>
				</td>
			</tr>
			<tr>
				<td>type</td>
				<td>"yyyy-mm-dd"</td>
				<td>日期格式。可设置为："yyyy-mm-dd" | "yyyy-m-d"</td>
			</tr>
			<tr>
				<td>hyphen</td>
				<td>"-"</td>
				<td>日期连接符。可设置为："-" | "/" | "."</td>
			</tr>
			<tr>
				<td>wday</td>
				<td>0</td>
				<td>周第一天。可设置为：0-6 之间的数字。
					<p>0=星期日</p>
					<p>1=星期一</p>
					<p>2=星期二</p>
					<p>3=星期三</p>
					<p>4=星期四</p>
					<p>5=星期五</p>
					<p>6=星期六</p>
				</td>
			</tr>
		</table>
	</div>

<h2>【内部 DOM 结构】</h2>
<div class="example">
<pre><code class="html">&lt;div class=&quot;html_calendar&quot;&gt;
	&lt;h5 class=&quot;title&quot;&gt;
		&lt;select class=&quot;year&quot;&gt;&lt;/select&gt;
		&lt;span&gt;年&lt;/span&gt;
		&lt;select class=&quot;month&quot;&gt;&lt;/select&gt;
		&lt;span&gt;月&lt;/span&gt;
	&lt;/h5&gt;
	&lt;table&gt;&lt;/table&gt;
&lt;/div&gt;
</code></pre>
</div>


<h2>【CSS 样式】</h2>
<div class="example">
<pre><code class="css">/* 日期输入框
------------------------------ */
input.input_calendar{width:78px;height:18px;padding:1px 5px;border:1px solid #555;background:url(img/calendar_day.png) no-repeat right center;font:12px/18px Arial;cursor:pointer;}

/* 日期选择器
------------------------------ */
.html_calendar{display:none;position:absolute;width:182px;font:12px Arial;border:1px solid #88b6d8;border-top:none;box-shadow:2px 2px 5px #083e66;z-index:1001;}
.html_calendar h5{position:relative;height:20px;padding:4px 6px;background:#88b6d8;color:#fff;font:normal 12px/20px "\5B8B\4F53";text-align:center;}
.html_calendar h5 select{vertical-align:baseline;font:12px/18px Tahoma;}
.html_calendar h5 span{padding:0 6px;}
.html_calendar table{position:relative;border-collapse:collapse;table-layout:fixed;empty-cells:show;font-family:Arial;text-align:center;}
.html_calendar table .sat{color:#06f}
.html_calendar table .sun{color:#e00;}
.html_calendar table .now{background:#d9e9fa;}
.html_calendar table .selected{background:#090;color:#fff;}
.html_calendar thead th{width:26px;height:24px;background:#fff;line-height:24px;text-align:center;}
.html_calendar tfoot td{height:24px;border-top:1px solid #ccc;background:#eee;color:#999;font-family:"\5B8B\4F53";line-height:24px;}
.html_calendar tfoot a{cursor:pointer;}
.html_calendar tfoot .pre,
.html_calendar tfoot .next{font-family:Tahoma;font-size:11px;}
.html_calendar tfoot .clear{}
.html_calendar tfoot a:hover{color:#333;text-decoration:none;}
.html_calendar tbody td{position:static;width:26px;height:22px;padding:0;background:#eaf4fe;line-height:22px;}
.html_calendar tbody td.num:hover{background:#88b6d8;color:#fff;text-decoration:none;cursor:pointer;}
</code></pre>
</div>

<h2>【JavaScript 调用方式】</h2>
<div class="example">
<pre><code class="js">// 直接调用
$("#element_id").calendar()

// 自定义参数调用
$("#element_id").calendar({
	begin_year:1950,
	end_year:2030,
	date:"1988/1/31",
	type:"yyyy-mm-dd",
	hyphen:"-",
	wday:0
});
</code></pre>
</div>

	<h2>【更多示例】</h2>
	<div class="example">
		<h3>在参数中设置默认值</h3>
		<blockquote>$("#id").calendar({date:"1988/1/31"});</blockquote>
		<dl class="form_add">
			<dt><label for="date_b">选择日期：</label></dt>
			<dd><input id="date_b" type="text" class="input_calendar" value="" readonly></dd>
		</dl>
	</div>
	<div class="example">
		<h3>在 value 中设置默认值</h3>
		<blockquote>
			<p>&lt;input id="element_id" type="text" value="1988-1-31"&gt;</p>
			<p>$("#id").calendar();</p>
			<p>※ 此时若在参数中设定了默认值，将无效。会优先取value的值。</p>
		</blockquote>
		<dl class="form_add">
			<dt><label for="date_c">选择日期：</label></dt>
			<dd><input id="date_c" type="text" class="input_calendar" value="1988-1-31" readonly></dd>
		</dl>
	</div>
</div>
<script src="../../js/jquery-1.4.4.min.js"></script>
<script src="../../js/chili/jquery.chili-2.2.js"></script>
<script src="../../js/chili/recipes.js"></script>
<script src="js/jquery.calendar.js"></script>
<script>
$(function(){
	// 日期选择器
	$("#date_a").calendar();
	
	// 日期选择器 参数中设置默认值
	$("#date_b").calendar({date:"1988/1/31"});
	
	// 日期选择器 value中设置默认值
	$("#date_c").calendar();
});
</script>
</body>
</html>
